/**
 * 列表使用方法 必须有jquery支持
 * @parm id <xx id='id'>innerHtml</xx>
 * @param layoutJsonObj GridView json 对象
 * @author wdfang
 * @time 2013-03-14 23:05:48
 */ 
var GridView = function(id, layoutJsonObj){
	this._id = id;
	var self = this;
	/***this********************json 对象涉及到的参数************************/
	/**
	 * ajax url 的设定
	 */
	this._url = '';
	/**
	 * ajax 后台访问 传的参数
	 */
	this._dataParas = '';
	/**
	 * 唯一主键索引
	 */
	this._idField = '';
	/**
	 * 是否单选
	 * true 单选 false 多选
	 */
	this._singleSelect = true;//默认
	/**
	 * 是否有分页
	 */
	this._pagination = true;//默认
	
	/***************************根据传入的json 对象渲染*****************************/
	/**
	 * box选择框布局 参数
	 */
	this._frozenColumns = new frozenColumns();
	/**
	 * 分页布局 参数
	 */
	this._pagerColumns = new pagerColumns();
	/**
	 * 列的对象数组
	 */
	this._columnsArray = new Array();
	/**
	 * 分页用到的参数对象
	 */
	this._pageParas = new pageParas();
	
	/**
	 * 内部方法
	 * 根据传入的 jsonObj 初始化数据
	 * 
	 * layoutJsonObj
	 * 即 布局样式 传入进来的json数据 的初始化
	 */
	this._setInitVal = function(){
		//ajax url 的设定 初始化数据
		if(typeof(layoutJsonObj.url)!="undefined"){
			this._url = layoutJsonObj.url;
		}
		//ajax url 访问 传入的参数
		if(typeof(layoutJsonObj.dataParas)!="undefined"){
			this._dataParas = layoutJsonObj.dataParas;
		}
		//主键初始化数据
		if(typeof(layoutJsonObj.idField)!="undefined"){
			this._idField = layoutJsonObj.idField;
		}
		//单复选
		if(typeof(layoutJsonObj.singleSelect)!="undefined"){
			this._singleSelect = layoutJsonObj.singleSelect;
		}
		//是否分页
		if(typeof(layoutJsonObj.pagination)!="undefined"){
			this._pagination = layoutJsonObj.pagination;
		}
		/********************以下是对象的初始化********************/
		//box选择框布局 参数 初始化
		if(typeof(layoutJsonObj.frozenColumns)!="undefined"){
			//frozenColumns.fileld 参数 初始化
			if(typeof(layoutJsonObj.frozenColumns.fileld)!="undefined"){
				this._frozenColumns.fileld = layoutJsonObj.frozenColumns.fileld;
			}
			//frozenColumns.checkbox 参数 初始化
			if(typeof(layoutJsonObj.frozenColumns.checkbox)!="undefined"){
				this._frozenColumns.checkbox = layoutJsonObj.frozenColumns.checkbox;
			}
			//frozenColumns.boxFloat 参数 初始化
			if(typeof(layoutJsonObj.frozenColumns.boxFloat)!="undefined"){
				this._frozenColumns.boxFloat = layoutJsonObj.frozenColumns.boxFloat;
			}
			//frozenColumns.boxStyle 参数 初始化
			if(typeof(layoutJsonObj.frozenColumns.boxStyle)!="undefined"){
				this._frozenColumns.boxStyle = layoutJsonObj.frozenColumns.boxStyle;
			}
		}
		//分页布局 参数 初始化 
		if(typeof(layoutJsonObj.pagerColumns)!="undefined"){
			//pagerColumns.pageList 参数 初始化
			if(typeof(layoutJsonObj.pagerColumns.pageList)!="undefined"){
				this._pagerColumns.pageList = layoutJsonObj.pagerColumns.pageList;
			}
			//pagerColumns.pageSize 参数 初始化
			if(typeof(layoutJsonObj.pagerColumns.pageSize)!="undefined"){
				this._pagerColumns.pageSize = layoutJsonObj.pagerColumns.pageSize;
			}
		}
		//列布局 参数 初始化
		if(typeof(layoutJsonObj.columns)!="undefined"){
			//循环获得 列表布局
			for(var i=0;i<layoutJsonObj.columns.length;i++){
				this._columns = new columns();
				//columns.title 参数 初始化
				if(typeof(layoutJsonObj.columns[i].title)!="undefined"){
					this._columns.title = layoutJsonObj.columns[i].title;
				}
				//columns.field 参数 初始化
				if(typeof(layoutJsonObj.columns[i].field)!="undefined"){
					this._columns.field = layoutJsonObj.columns[i].field;
				}
				//columns.width 参数 初始化
				if(typeof(layoutJsonObj.columns[i].width)!="undefined"){
					this._columns.width = layoutJsonObj.columns[i].width;
				}
				//columns.rowspan 参数 初始化
				if(typeof(layoutJsonObj.columns[i].rowspan)!="undefined"){
					this._columns.rowspan = layoutJsonObj.columns[i].rowspan;
				}
				//columns.colspan 参数 初始化
				if(typeof(layoutJsonObj.columns[i].colspan)!="undefined"){
					this._columns.colspan = layoutJsonObj.columns[i].colspan;
				}
				//columns.align 参数 初始化
				if(typeof(layoutJsonObj.columns[i].align)!="undefined"){
					this._columns.align = layoutJsonObj.columns[i].align;
				}
				//columns.sortable 参数 初始化
				if(typeof(layoutJsonObj.columns[i].sortable)!="undefined"){
					this._columns.sortable = layoutJsonObj.columns[i].sortable;
				}
				//columns.showcolumn 参数 初始化
				if(typeof(layoutJsonObj.columns[i].showcolumn)!="undefined"){
					this._columns.showcolumn = layoutJsonObj.columns[i].showcolumn;
				}
				//columns.formatter 参数 初始化
				if(typeof(layoutJsonObj.columns[i].formatter)!="undefined"){
					this._columns.formatter = layoutJsonObj.columns[i].formatter;
				}
				this._columnsArray[i] = this._columns;
			}
		}
	};
	/**
	 * 内部函数
	 * 渲染 列表 标题行
	 */
	this._render_title = function(){
		/**
		 * 调用函数
		 * 		_setInitVal()
		 * 执行初始化layout 样式 操作
		 */
		this._setInitVal();
		
		//渲染开始
		var buf = [];
		buf.push('<div class="gridViewer" id="gridViewer">');
		buf.push('<table cellpadding="0" cellspacing="0">\n');
		buf.push('<tr>\n');
		//选择框
		if(this._frozenColumns.boxFloat == 'left'){//左边显示
			buf.push('<th class="checkbox">');
			if(!this._singleSelect){//是否单选
				buf.push('<input type="'+ this._frozenColumns.boxStyle +'" onclick="document.getElementById(\'' + this._frozenColumns.fileld + '\').view._toggleSelect()" />');
			}
			buf.push('</th>\n');
		}
		//列表展示
		for(var i=0;i<this._columnsArray.length;i++){
			var columns = this._columnsArray[i];
			if(columns.width>0)
				buf.push('<th noWrap="noWrap" id="'+columns.field+'" name="'+columns.field+'" colspan="'+columns.colspan+'" rowspan="'+columns.rowspan+'" width="'+columns.width+'" align="'+columns.align+'">' + columns.title + '</th>\n');
			else
				buf.push('<th noWrap="noWrap" id="'+columns.field+'" name="'+columns.field+'" colspan="'+columns.colspan+'" rowspan="'+columns.rowspan+'" align="'+columns.align+'">' + columns.title + '</th>\n');
		}
		//选择框
		if(this._frozenColumns.boxFloat == 'right'){//右边显示
			buf.push('<th class="checkbox">');
			if(!this._singleSelect){//是否单选
				buf.push('<input type="'+ this._frozenColumns.boxStyle +'" onclick="document.getElementById(\'' + this._frozenColumns.fileld + '\').view._toggleSelect()" />');
			}
			buf.push('</th>\n');
		}
		buf.push("</tr>\n");
		buf.push("<tbody id='datalist_tbody'>\n");
		buf.push("</tbody>\n");
		buf.push("</table>\n");
		buf.push("</div>\n");
		
		/**
		 * 有分页，添加分页存放容器
		 */
		if(this._pagination){
			buf.push("<div class='pageViewer' id='pageViewer'></div>\n");
			/**
			 * 初始化
			 * pageParas 中的 pageSize 与 pageList
			 */
			this._pageParas.pageSize = this._pagerColumns.pageSize;
			this._pageParas.pageList = this._pagerColumns.pageList;
		}
		
		$('#'+this._id).empty().html(buf.join(''));
	};
	
	/**
	 * 接口方法
	 * 控件使用者重写本方法, 用来向服务器端发起AJAX请求.
	 * 如果要取消本次渲染, 重写回调函数返回 void.
	 * 根据传入的 jsonObj 初始化数据
	 * 后 ajax 连接服务器获得 列表数据集和分页数据信息
	 * json 对象形如 此方法没有包含分页所以不必要有pager的相关信息
	 * {list:
	 * 		[{
	 * 		pwd:"e10adc3949ba59abbe56e057f20f883e",
	 *  	email:"wangdongfang1016@sina.com",
	 *  	tel:"1863893****",
	 *  	name:"超级管理员",
	 *  	createdate:"2013-03-11 09:47:15",
	 *  	userid:"admin"
	 *  	}]}
	 */
	this._ajax = function(){
		function OnSuccess(jsonObj) {
			if(typeof(jsonObj)=='object'){
				/**
				 * 列表渲染
				 */
				self._render(jsonObj);
			}
		}
		var param = self._dataParas;
		$.ajax({
			type : "POST",
			data : param,
			url : self._url,
			dataType : "json",
			success : OnSuccess
		});
	};
	
	/**
	 * 接口方法 分页的时候使用
	 * 控件使用者重写本方法, 用来向服务器端发起AJAX请求.
	 * 如果要取消本次渲染, 重写回调函数返回 void.
	 * 根据传入的 jsonObj 初始化数据
	 * 后 ajax 连接服务器获得 列表数据集和分页数据信息
	 * json 对象形如
	 * {list:
	 * 		[{
	 * 		pwd:"e10adc3949ba59abbe56e057f20f883e",
	 *  	email:"wangdongfang1016@sina.com",
	 *  	tel:"1863893****",
	 *  	name:"超级管理员",
	 *  	createdate:"2013-03-11 09:47:15",
	 *  	userid:"admin"
	 *  	}],
	 *  pager:{pageNumber:0,pageSize:10,pageCount:1,recordCount:1}}
	 */
	this._ajax_page = function(pageNumber, pageSize){
		function OnSuccess(jsonObj) {
			if(typeof(jsonObj)=='object'){
				/**
				 * 有分页
				 */
				if(self._pagination){
					/**
					 * 分页渲染
					 */
					self._render_pager(jsonObj);
				}
				/**
				 * 列表渲染
				 */
				self._render(jsonObj);
			}else{
				$('#countperpagesizeselect').find('option').each(function(){
					if($(this).attr('value')==this._pageParas._pageSize){
						$(this).attr('selected',true);
					}
				});
				$('#countperpagenumberselect').find('option').each(function(){
					if($(this).attr('value')==this._pageParas._pageNumber){
						$(this).attr('selected',true);
					}
				});
			}
		}
		var param = this._dataParas+"&pageNumber="+pageNumber+"&pageSize="+pageSize;
		if(param.substring(0,1)=='&'){
			param = param.substring(1, param.length);
		}
		$.ajax({
			type : "POST",
			data : param,
			url : self._url,
			dataType : "json",
			success : OnSuccess
		});
	};
	
	/**
	 * 
	 * 执行函数，调用_ajax_page or ajax
	 * 
	 */
	this._execute = function(){
		if(this._pagination){
			/**
			 * 调用外部扩展函数 默认第一页 和 默认的 每页显示列数
			 */
			jsonObj = this._ajax_page(1, this._pagerColumns.pageSize);
		}else{ 
			/**
			 * 调用外部扩展函数
			 */
			jsonObj = this._ajax();
		};
	};
	
	/**
	 * 内置函数
	 * 获得列表grid数据的填充
	 * 渲染列表控件.
	 */
	this._render = function(jsonObj){
		//渲染开始
		var buf = [];
		if(jsonObj!=undefined){
			for(var j=0;j<jsonObj.list.length;j++){
				buf.push("<tr>\n");
				//选择框
				if(this._frozenColumns.boxFloat == 'left'){//左边显示
					buf.push('<td class="checkbox">');
					buf.push('<input type="'+ this._frozenColumns.boxStyle +'" onclick="document.getElementById(\'' + this._frozenColumns.fileld + '\').view._toggleSelect()" />');
					buf.push('</td>\n');
				}
				//表格填充
				for(var i=0;i<this._columnsArray.length;i++){
					var columns = this._columnsArray[i];
					buf.push('<th noWrap="noWrap" colspan="'+columns.colspan+'" align="'+columns.align+'">' + eval('jsonObj.list['+j+'].'+columns.field) + '</td>\n');
				}
				//选择框
				if(this._frozenColumns.boxFloat == 'right'){//右边显示
					buf.push('<td class="checkbox">');
					buf.push('<input type="'+ this._frozenColumns.boxStyle +'" onclick="document.getElementById(\'' + this._frozenColumns.fileld + '\').view._toggleSelect()" />');
					buf.push('</td>\n');
				}
				buf.push("</tr>\n");
			};
		}else{
			buf.push("<tr>\n");
			buf.push("<td colspan='100'>");
			buf.push("没有符合条件的数据");
			buf.push("</td>");
			buf.push("</tr>\n");
		};
		$('#'+this._id).find('#datalist_tbody').empty().html(buf.join(''));
	};
	
	/*************************************分页的相关代码******************************************/
	
	/**
	 * 内部方法
	 * 根据传入的对象获得页的所需值
	 */
	this._setInitPagerVal = function(pagerJsonObj){
		if(typeof(pagerJsonObj)!='undefind'){
			/**
			 * _pageCount 赋值
			 */
			if(typeof(pagerJsonObj.pageCount)!='undefined'){
				this._pageParas._pageCount = pagerJsonObj.pageCount;
			}
			/**
			 * _pageNumber 赋值
			 */
			if(typeof(pagerJsonObj.pageNumber)!='undefined'){
				this._pageParas._pageNumber = pagerJsonObj.pageNumber;
			}
			/**
			 * _pageSize 赋值
			 */
			if(typeof(pagerJsonObj.pageSize)!='undefined'){
				this._pageParas._pageSize = pagerJsonObj.pageSize;
			}
			/**
			 * _recordCount 赋值
			 */
			if(typeof(pagerJsonObj.recordCount)!='undefined'){
				this._pageParas._recordCount = pagerJsonObj.recordCount;
			}
		}
	};
	
	/**
	 * 内部方法.
	 */
	this._goSeach = function(pageNumber){
		var pageSize = $('#countperpagesizeselect').attr('value');
		if(!pageSize){
			pageSize= this._pageParas._pageSize;
		}
		/**
		 *  调用salt.onclick方法
		 */
		this._ajax_page(pageNumber,pageSize);
	};
	
	/**
	 * 内置函数
	 * 
	 * 渲染控件.
	 * 分页的渲染方法
	 */
	this._render_pager = function(pagerJsonObj){
		/**
		 * 分页页码数据初始赋值
		 */
		this._setInitPagerVal(pagerJsonObj.pager);
		
		var str = '';
		str += '<div style="float: left;">\n';
		str += '<span>第'+ this._pageParas._pageNumber +'页/共'+ this._pageParas._pageCount +'页共'+ this._pageParas._recordCount +'条记录</span>\n';
		str += '<span>每页显示<select id="countperpagesizeselect" name="countperpagesizeselect" style="width: 80px;">';
		for(var i=0;i<this._pageParas._pageList.length;i++){
			if(this._pageParas._pageList[i] == this._pageParas._pageSize){
				str += '<option value="'+this._pageParas._pageList[i]+'" selected>'+this._pageParas._pageList[i]+'</option>';
			}else{
				str += '<option value="'+this._pageParas._pageList[i]+'">'+this._pageParas._pageList[i]+'</option>';
			}
		}
		str += '</select> 条记录</span>\n';
		str += '</div>\n';
		
		str += '<div style="float: right;">\n';
		str += '<span><a href="javascript:void(0)" id="clickpagenumfirst">首页</a>';
		if(this._pageParas._pageNumber > 1){
			str += '<a href="javascript:void(0)" id="clickpagenumbef">上一页</a>';
		}
		if(this._pageParas._pageNumber < this._pageParas._pageCount){
			str += '<a href="javascript:void(0)" id="clickpagenumaft">下一页</a>';
		}
		str += '<a href="javascript:void(0)" id="clickpagenumlast">尾页</a></span>\n';
		str += '<span>跳转到：<select name="countperpagenumberselect" id="countperpagenumberselect">';
		for(var i = 1; i <= this._pageParas._pageCount; i++) {
			 if(i == this._pageParas._pageNumber){
				 str += '<option value="'+i+'" selected>'+i+'</option>';
			 }else{
				 str += '<option value="'+i+'">'+i+'</option>';
			 }
		 }
		str += '<span>\n';
		str += '</div>\n';

		$('#'+this._id).find('#pageViewer').empty().html(str);
		
		//首页点击
		$('#pageViewer').find('#clickpagenumfirst').click(function(){
			self._goSeach(1);
		});
		//上一页
		$('#pageViewer').find('#clickpagenumbef').click(function(){
			self._goSeach(self._pageParas._pageNumber-1);
		});
		//下一页
		$('#pageViewer').find('#clickpagenumaft').click(function(){
			self._goSeach(self._pageParas._pageNumber+1);
		});
		//尾页
		$('#pageViewer').find('#clickpagenumlast').click(function(){
			self._goSeach(self._pageParas._pageCount);
		});
		//每页显示select 点击
		$('#pageViewer').find('#countperpagesizeselect').change(function(){
			self._goSeach(1);
		});
		//跳转到select 点击
		$('#pageViewer').find('#countperpagenumberselect').change(function(){
			self._goSeach($(this).attr('value'));
		});
	};
	/**
	 * 调用函数
	 * 		_render_title()
	 * 执行标题行生成操作
	 */
	this._render_title();
	/**
	 * 调用函数
	 * 		_execute()
	 * 执行访问后台 与 列表等加载操作
	 */
	this._execute();
};
/**
 * 选择框样式设定
 * 使用的参数对象
 */
var frozenColumns = function(){
	/**
	 * checkbox 定义的name和id
	 * 如 fileld = 'xixihaha'
	 * <input type='radio' name='xixihaha' id='xixihaha'>
	 */
	this.fileld = 'frozenColumns_fileld';//默认
	/**
	 * 是否显示checkbox按钮
	 * true 显示，false 不显示
	 */
	this.checkbox = true;//默认
	/**
	 * 选择框放左边还是右边
	 * 对应：left or right
	 */
	this.boxFloat = 'left';//默认
	/**
	 * 选择控件样式 radio or checkbox
	 */
	this.boxStyle = 'checkbox';//默认
};
/**
 * 分页基本样式设定
 * 使用的参数对象
 */
var pagerColumns = function(){
	/**
	 * 每页显示的列数
	 * 这个必须在_pageList里面包含
	 */
	this.pageSize = 10;//默认
	/**
	 * 设定每页显示列数范围
	 */
	this.pageList = [5,10,20,30,50,100];//默认
};
/**
 * 设定列的布局
 * 使用的参数对象
 */
var columns = function(){
	/**
	 * 列名字
	 */
	this.title = ''; 
	/**
	 * 列 id
	 */
	this.field = '';
	/**
	 * 长度 长度大小为 0 时表示自动
	 * 单位：px
	 */
	this.width = 0;//默认 
	/**
	 * 类似 css rowspan
	 */
	this.rowspan = 0;//默认 
	/**
	 * 类似 css colspan
	 */
	this.colspan = 0;//默认
	/**
	 * 布局位置 left or right or center
	 */
	this.align = 'left';//默认
	/**
	 * 是否可排序
	 */
	this.sortable = false;//默认
	/**
	 * 列是否隐藏
	 * true 显示 false 隐藏
	 */
	this.showcolumn = true;//默认
	/**
	 * 数据 函数 扩展 显示数据是函数处理后的
	 */
	this.formatter = function(value,rowData,rowIndex){return value;};
};

/**
 * 分页使用的参数对象
 */ 
var pageParas = function(){
	/**
	 * 总页数
	 */
	this._pageCount = 0;
	/**
	 * 当前显示页数
	 */
	this._pageNumber = 1;
	/**
	 * 当前设定每页显示条数 即：显示多少条 
	 * 		这个值必须在 _pageList 之内包含
	 * 初始值为10条
	 */
	this._pageSize = 10;
	/**
	 * 总条数
	 */
	this._recordCount = 0;
	/**
	 * 当前设定每页显示条数 的可选择数量
	 */
	this._pageList = [5,10,20,30,50,100];
};
